import React, { memo } from 'react';
import { Checkbox } from "antd-mobile";
import "./index.less";

function ListItem({ item, listFields, emitCheck }) {
    const getStatusTxt = (status, statusList) => {
        const resolvedStatusList = typeof statusList === 'function' ? statusList() : statusList;
        return resolvedStatusList.find(el => el.value === status)?.label 
    };

    const handleCheckboxChange = (e) => {
        const updatedItem = { ...item, check: e };
        emitCheck(updatedItem);
    };

    return (
        <div className="box">
            <div className="boxTit">
                <span className="boxTitSize">{listFields.title.label}:{item[listFields.title.value]}</span>
                <Checkbox
                    style={{
                        "--font-size": "14px",
                        "--icon-size": "14px",
                        "--gap": "7px",
                    }}
                    checked={item.check}
                    onChange={handleCheckboxChange}
                >
                    选择
                </Checkbox>
            </div>
            <div className="boxContent">
                {listFields.children.length ? listFields.children.map((el, index) => (
                    <div className="bcLine borderB" key={index}>
                        <span className="bcLineSize">{el.label}:</span>
                        {typeof (el.statusColor) == 'function' ? (
                            <span className={`bcLineSize ${el.statusColor(item[el.value])}`}>{getStatusTxt(item[el.value], el.statusList)}</span>
                        ) : (
                            <span className="bcLineSize">{item[el.value]}</span>
                        )}
                    </div>
                )) : null}
            </div>
        </div>
    );
}

export default memo(ListItem);